<nz-card [nzBordered]="false">
  <form nz-form [formGroup]="validateForm" *ngIf="active">

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="title" nzRequired>
        <span>
          主题
          <i nz-icon nz-tooltip nzTitle="请输入主题" type="question-circle" theme="outline"></i>
        </span>
      </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input id="title" formControlName="title" [(ngModel)]="news.title">
        <nz-form-explain *ngIf="validateForm.get('title').dirty && validateForm.get('title').errors">请输入主题!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="author" nzRequired>
        <span>
          作者
          <i nz-icon nz-tooltip nzTitle="请输入作者" type="question-circle" theme="outline"></i>
        </span>
      </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input id="author" formControlName="author" [(ngModel)]="news.author">
        <nz-form-explain *ngIf="validateForm.get('author').dirty && validateForm.get('author').errors">请输入作者!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="channelId" nzRequired>
        <span>
          频道
          <i nz-icon nz-tooltip nzTitle="请选择频道" type="question-circle" theme="outline"></i>
        </span>
      </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-select  formControlName="channelId"  [(ngModel)]="news.channelId" nzAllowClear nzPlaceHolder="请选择频道">
          <nz-option *ngFor="let option of optionList" [nzValue]="option.value" [nzLabel]="option.label"></nz-option>
        </nz-select>
        <nz-form-explain *ngIf="validateForm.get('channelId').dirty && validateForm.get('channelId').errors">请选择频道!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="summer" nzRequired>
        <span>
          摘要
          <i nz-icon nz-tooltip nzTitle="请输入摘要" type="question-circle" theme="outline"></i>
        </span>
      </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <textarea nz-input id="summer" formControlName="summer" rows="2" [(ngModel)]="news.summer"></textarea>
        <nz-form-explain *ngIf="validateForm.get('summer').dirty && validateForm.get('summer').errors">请输入摘要!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="keywords" nzRequired>
        <span>
          关键字
          <i nz-icon nz-tooltip nzTitle="请输入关键字" type="question-circle" theme="outline"></i>
        </span>
      </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <textarea nz-input id="keywords" formControlName="keywords" rows="2" [(ngModel)]="news.keywords"></textarea>
        <nz-form-explain *ngIf="validateForm.get('keywords').dirty && validateForm.get('keywords').errors">请输入关键字!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="keywords">
        <span>
          主图
          <i nz-icon nz-tooltip nzTitle="图文信息，选择上次图片" type="question-circle" theme="outline"></i>
        </span>
      </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-upload
          [nzAction]="fileUploadUrl"
          nzListType="picture-card"
          [(nzFileList)]="fileList"
          [nzShowButton]="fileList.length < 1"
          (nzChange)="handleChange($event)"
          [nzPreview]="handlePreview">
          <i nz-icon type="plus"></i>
          <div class="ant-upload-text">Upload</div>
        </nz-upload>
        <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
          <ng-template #modalContent>
            <img [src]="previewImage" [ngStyle]="{ 'width': '100%' }" />
          </ng-template>
        </nz-modal>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="content" nzRequired>
        <span>
          内容
          <i nz-icon nz-tooltip nzTitle="请输入内容" type="question-circle" theme="outline"></i>
        </span>
      </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <ckeditor [editor]="Editor" formControlName="content" [config]="config" [(ngModel)]="news.content"></ckeditor> 
        <nz-form-explain *ngIf="validateForm.get('content').dirty && validateForm.get('content').errors">请输入内容!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="readNum">
        <span>
          预读数量
          <i nz-icon nz-tooltip nzTitle="请输入预读数量" type="question-circle" theme="outline"></i>
        </span>
      </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input id="readNum" formControlName="readNum" [(ngModel)]="news.readNum">
        <nz-form-explain *ngIf="validateForm.get('readNum').dirty && validateForm.get('readNum').errors">请输入预读数量!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nz-row style="margin-bottom: 8px;">
      <nz-form-control [nzSpan]="14" [nzOffset]="6">
        <a nz-button nzType="default" routerLink="/news/list">取消</a>
        <button nz-button type="submit" [nzType]="'primary'" (click)="handleSave()" [nzLoading]="isConfirmLoading">保存</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-card>


